<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>图层编辑</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <link rel="icon" href="${pageContext.request.contextPath}/static/libs/uiframe/frame/static/image/code.png">
    <style type="text/css">
        .layui-input-block {
            margin-left: 130px;
            min-height: 36px;
        }

        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 100px;
            font-weight: 400;
            text-align: right;
        }
    </style>
    <form class="layui-form c3form" action="">
        <c:choose>
            <c:when test="${type == 'ol.layer.Tile'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">图层类型：</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="type">
                            <option value="">请选择图层类型</option>
                            <option value="ol.layer.Group">图层组</option>
                            <option value="ol.layer.Tile" selected="selected">切片图层</option>
                            <option value="ol.layer.Vector">矢量图层</option>
                            <option value="ol.layer.VectorTile">矢量切片</option>
                            <option value="ol.layer.Heatmap">热点图</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="layerName" value="${layer.layerName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层别名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="aliasName" value="${layer.aliasName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层别名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">透明度：</label>
                    <div class="layui-input-block">
                        <input type="text" name="opacity" value="${layer.opacity}"
                               lay-verify="" autocomplete="off" placeholder="请输入透明度，如：0.8" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示：</label>
                    <div class="layui-input-block">
                        <c:choose>
                            <c:when test="${layer.visible == 'true'}">
                                <input type="radio" name="visible" value="true" title="是"  checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:when>
                            <c:when test="${layer.visible == 'false'}">
                                <input type="radio" name="visible" value="true" title="是">
                                <input type="radio" name="visible" value="false" title="否"  checked="checked">
                            </c:when>
                            <c:otherwise>
                                <input type="radio" name="visible" value="true" title="是" checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示范围：</label>
                    <div class="layui-input-block">
                        <input type="text" name="extent" value="${layer.extent}"
                               lay-verify="" autocomplete="off" placeholder="请输入显示范围，如：114.229839,33.93893,123.40053,38.904819" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="maxResolution" value="${layer.maxResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：1.40625" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最小分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="minResolution" value="${layer.minResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：0.000002682209014892578" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">投影类型：</label>
                    <div class="layui-input-block">
                        <input type="text" name="projection" value="${layer.projection}"
                               lay-verify="" placeholder="请输入投影类型，如：EPSG:4326" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述：</label>
                    <div class="layui-input-block">
                        <textarea name="description" value="${source.description}"
                                  placeholder="请输入描述内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="layeradd">提 交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
                    </div>
                </div>
            </c:when>
            <c:when test="${type == 'ol.layer.Group'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">图层类型：</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="type">
                            <option value="">请选择图层类型</option>
                            <option value="ol.layer.Group" selected="selected">图层组</option>
                            <option value="ol.layer.Tile">切片图层</option>
                            <option value="ol.layer.Vector">矢量图层</option>
                            <option value="ol.layer.VectorTile">矢量切片</option>
                            <option value="ol.layer.Heatmap">热点图</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="layerName" value="${layer.layerName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层别名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="aliasName" value="${layer.aliasName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层别名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">透明度：</label>
                    <div class="layui-input-block">
                        <input type="text" name="opacity" value="${layer.opacity}"
                               lay-verify="" autocomplete="off" placeholder="请输入透明度，如：0.8" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示：</label>
                    <div class="layui-input-block">
                        <c:choose>
                            <c:when test="${layer.visible == 'true'}">
                                <input type="radio" name="visible" value="true" title="是"  checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:when>
                            <c:when test="${layer.visible == 'false'}">
                                <input type="radio" name="visible" value="true" title="是">
                                <input type="radio" name="visible" value="false" title="否"  checked="checked">
                            </c:when>
                            <c:otherwise>
                                <input type="radio" name="visible" value="true" title="是" checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示范围：</label>
                    <div class="layui-input-block">
                        <input type="text" name="extent" value="${layer.extent}"
                               lay-verify="" autocomplete="off" placeholder="请输入显示范围，如：114.229839,33.93893,123.40053,38.904819" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="maxResolution" value="${layer.maxResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：1.40625" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最小分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="minResolution" value="${layer.minResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：0.000002682209014892578" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">投影类型：</label>
                    <div class="layui-input-block">
                        <input type="text" name="projection" value="${layer.projection}"
                               lay-verify="" placeholder="请输入投影类型，如：EPSG:4326" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述：</label>
                    <div class="layui-input-block">
                        <textarea name="description" value="${source.description}"
                                  placeholder="请输入描述内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="layeradd">提 交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
                    </div>
                </div>
            </c:when>
            <c:when test="${type == 'ol.layer.Vector'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">图层类型：</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="type">
                            <option value="">请选择图层类型</option>
                            <option value="ol.layer.Group">图层组</option>
                            <option value="ol.layer.Tile">切片图层</option>
                            <option value="ol.layer.Vector" selected="selected">矢量图层</option>
                            <option value="ol.layer.VectorTile">矢量切片</option>
                            <option value="ol.layer.Heatmap">热点图</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="layerName" value="${layer.layerName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图层别名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="aliasName" value="${layer.aliasName}"
                               lay-verify="" autocomplete="off" placeholder="请输入图层别名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">透明度：</label>
                    <div class="layui-input-block">
                        <input type="text" name="opacity" value="${layer.opacity}"
                               lay-verify="" autocomplete="off" placeholder="请输入透明度，如：0.8" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否显示：</label>
                    <div class="layui-input-block">
                        <c:choose>
                            <c:when test="${layer.visible == 'true'}">
                                <input type="radio" name="visible" value="true" title="是"  checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:when>
                            <c:when test="${layer.visible == 'false'}">
                                <input type="radio" name="visible" value="true" title="是">
                                <input type="radio" name="visible" value="false" title="否"  checked="checked">
                            </c:when>
                            <c:otherwise>
                                <input type="radio" name="visible" value="true" title="是" checked="checked">
                                <input type="radio" name="visible" value="false" title="否">
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示范围：</label>
                    <div class="layui-input-block">
                        <input type="text" name="extent" value="${layer.extent}"
                               lay-verify="" autocomplete="off" placeholder="请输入显示范围，如：114.229839,33.93893,123.40053,38.904819" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最大分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="maxResolution" value="${layer.maxResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：1.40625" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">最小分辨率：</label>
                    <div class="layui-input-block">
                        <input type="text" name="minResolution" value="${layer.minResolution}"
                               lay-verify="" autocomplete="off" placeholder="请输入最大分辨率，如：0.000002682209014892578" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">投影类型：</label>
                    <div class="layui-input-block">
                        <input type="text" name="projection" value="${layer.projection}"
                               lay-verify="" placeholder="请输入投影类型，如：EPSG:4326" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">样式函数：</label>
                    <div class="layui-input-block">
                        <input type="text" name="styleFunction" value="${layer.options.styleFunction}"
                               lay-verify="" autocomplete="off" placeholder="请输入样式函数名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">悬浮事件：</label>
                    <div class="layui-input-block">
                        <input type="text" name="pointerMove" value="${layer.options.pointerMove}"
                               lay-verify="" autocomplete="off" placeholder="请输入悬浮事件触发的函数" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">移除事件：</label>
                    <div class="layui-input-block">
                        <input type="text" name="pointerReMove" value="${layer.options.pointerReMove}"
                               lay-verify="" autocomplete="off" placeholder="请输入移除事件触发的函数" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">点击事件：</label>
                    <div class="layui-input-block">
                        <input type="text" name="click" value="${layer.options.click}"
                               lay-verify="" autocomplete="off" placeholder="请输入点击事件触发的函数" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述：</label>
                    <div class="layui-input-block">
                        <textarea name="description" value="${source.description}"
                                  placeholder="请输入描述内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="layeradd">提 交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
                    </div>
                </div>
            </c:when>
            <c:otherwise>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据源类型：</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="type">
                            <option value="">请选择图层类型</option>
                            <option value="ol.layer.Group">图层组</option>
                            <option value="ol.layer.Tile">切片图层</option>
                            <option value="ol.layer.Vector">矢量图层</option>
                            <option value="ol.layer.VectorTile">矢量切片</option>
                            <option value="ol.layer.Heatmap">热点图</option>
                        </select>
                    </div>
                </div>
            </c:otherwise>
        </c:choose>
    </form>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
    <script>
       var layerId = '${layer.layerId}',type = '${type}';

        layui.use(['form', 'layer'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                number: function (value) {
//                    if(/^\d+\d+\d$/.test(value)){
//                        return '输入项必须为数字';
//                    }
                },

                layerName: function (value) {
                    if (value.length < 2) {
                        return '应用名称至少得2个字符';
                    }
                },
                description: function (value) {
//                    if(value.length < 2){
//                        return '描述至少得2个字符啊';
//                    }
                }
            });

            form.on('select(type)', function(data){
                var hight,selectType = data.value;

                parent.layer.iframeSrc(parent.layIndex, '${pageContext.request.contextPath}/ol/layer/layeradd?type=' + selectType);
                parent.layer.style(parent.layIndex, {height:'550px'});
            });

            //监听提交
            form.on('submit(layeradd)', function (data) {
                var formData = data.field, url, optionsData = {};
                if (layerId == "") {
                    url = '${pageContext.request.contextPath}/ol/layer/layercreate';
                } else {
                    url = '${pageContext.request.contextPath}/ol/layer/layerupdate';
                }

                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: url,
                    data: {
                        //layerId: layerId,
                        layerName: formData['layerName'],
                        aliasName: formData['aliasName'],
                        opacity: parseFloat(formData['opacity']),
                        visible: formData['visible'],
                        extent: formData['extent'],
                        maxResolution: formData['maxResolution'],
                        minResolution: formData['minResolution'],
                        projection: formData['projection'],
                        type: type,
                        options: optionsData,
                        description: formData['description']
                    },
                    success: function (data) {
                        layer.msg(data.status);
                        window.parent.layIndex = null;
                        window.parent.closeAllLayer();
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
                return false;
            });
        })
    </script>
</head>
<body>

</body>
</html>
